<template>
  <view class="containter">
    <view class="headerBg"></view>
    <uv-navbar title="派单统计" titleStyle="color:#fff" bgColor="#4B94ED" placeholder>
      <template v-slot:left>
        <image @click="toRankingPage" style="width: 52rpx;height: 52rpx;" src="../../static/images/ranking.png" mode="">
        </image>
      </template>
    </uv-navbar>
    <view class="main">
      <view class="block" style="margin-bottom: 30rpx;">
        <view class="block-title">
          累计派单
        </view>
        <view class="charts-box">
            <qiun-data-charts 
              type="ring"
              :opts="opts"
              inScrollView="true"
              :chartData="chartData"
            />
          </view>
      </view>
      <view class="block">
        <view class="block-title">
          累计签单
        </view>
        <view class="charts-box">
            <qiun-data-charts 
              type="ring"
              :opts="opts"
              inScrollView="true"
              :chartData="chartData"
            />
          </view>
      </view>
      <view style="width: 100%;height: 180rpx;"></view>
    </view>
    <Tabbar :selectedIndex="1"></Tabbar>
  </view>
</template>

<script>
  export default {
data() {
    return {
      chartData: {},
      opts: {
        rotate: false,
        rotateLock: false,
        color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
        padding: [5,5,5,5],
        dataLabel: true,
        enableScroll: false,
        legend: {
          show: true,
          position: "bottom",
          lineHeight: 25
        },
        title: {
          name: "合计",
          fontSize: 15,
          color: "#666666"
        },
        subtitle: {
          name: "118",
          fontSize: 25,
          color: "#7cb5ec"
        },
        extra: {
          ring: {
            ringWidth: 60,
            activeOpacity: 0.5,
            activeRadius: 10,
            offsetAngle: 0,
            labelWidth: 15,
            border: false,
            borderWidth: 3,
            borderColor: "#FFFFFF"
          }
        }
      }
    };
  },
    onLoad() {
      this.getServerData();
    },
    methods: {
      getServerData() {
        //模拟从服务器获取数据时的延时
        setTimeout(() => {
          //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
          let res = {
            series: [{
              data: [{
                "name": "深圳",
                "value": 50,
                "labelText": "50单"
              }, {
                "name": "郑州",
                "value": 30,
                "labelText": "30单"
              }, {
                "name": "杭州",
                "value": 20,
                "labelText": "20单"
              }, {
                "name": "北京",
                "value": 18,
                "labelText": "18单"
              }]
            }]
          };
          this.chartData = JSON.parse(JSON.stringify(res));
        }, 500);
      },
      // 跳转排行榜页面
      toRankingPage(){
        uni.navigateTo({
          url: "/pages/statistic/ranking"
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .containter {
    position: relative;

    .headerBg {
      width: 750rpx;
      height: 704rpx;
      background: linear-gradient(to top, rgba(16, 113, 231, 0) 0%, #1071E7 100%);
      position: absolute;
      top: 0;
      left: 0;
    }

    .main {
      padding: 30rpx 20rpx;
      box-sizing: border-box;
      position: relative;
      z-index: 10;
      height: calc( 100vh - 270rpx);
      .block {
        width: 100%;
        height: 666rpx;
        background: #fff;
        box-shadow: 0rpx -8rpx 20rpx -8rpx rgba(16, 113, 231, 0.1), 0rpx 32rpx 32rpx -16rpx rgba(16, 113, 231, 0.1);
        border-radius: 20rpx;
        padding: 30rpx;
        box-sizing: border-box;

        .block-title {
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          font-size: 28rpx;
          color: #333333;
        }

        .charts-box {
          width: 100%;
          height: 300px;
        }
      }
    }

  }
</style>